/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-10-05 18:45:02
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-10-06 23:09:14
 * @FilePath: \react_staging\src\App.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
import './App.css'
export default class App extends Component {
	//状态在哪里操作状态的方法就在哪里
	state = {
		todos: [
			{
				id: '0001',
				title: '吃饭',
				done: false,
			},
			{
				id: '0002',
				title: '睡觉',
				done: false,
			},
			{
				id: '0003',
				title: '打豆豆',
				done: true,
			},
		],
	}
	//addTo 同于添加一个todo, 接收参数是todoObj
	addTo = (todoObj) => {
		//获取原来的todos
		const { todos } = this.state
		//追加一个todo
		const newTodos = [todoObj, ...todos]
		//更新状态
		this.setState({ todos: newTodos })
	}
	//updateTodo用于更新一个todo对象
	updateTodo = (id, done) => {
		//获取原有的todos
		const { todos } = this.state
		//找到匹配的处理数据todos
		const newTodos = todos.map((todoObj) => {
			if (todoObj.id === id) return (todoObj = { ...todoObj, done })
			else return todoObj
		})
		this.setState({ todos: newTodos })
	}
	//deleteTodo用于删除一个todo对象
	deleteTodo = (id) => {
		const { todos } = this.state
		const newTodos = todos.filter((todoObj) => todoObj.id !== id)
		//更新状态
		this.setState({ todos: newTodos })
	}
	//checkAll用于全选和取消全选
	checkAllTodo = (done) => {
		const { todos } = this.state
		const newTodos = todos.map((todoObj) => ({ ...todoObj, done }))
		//更新状态
		this.setState({ todos: newTodos })
	}
    //清除所有已经完成的todo
    clearAllDone=()=>{
        const { todos } = this.state
        const newTodos = todos.filter(todoObj=>!todoObj.done)
        this.setState({todos:newTodos})
    }
	render() {
		const { todos } = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTo={this.addTo}></Header>
					<List
						todos={todos}
						updateTodo={this.updateTodo}
						deleteTodo={this.deleteTodo}
					></List>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}></Footer>
				</div>
			</div>
		)
	}
}
